import { Text, View, StyleSheet, Image, SafeAreaView, ScrollView, TouchableWithoutFeedback, StatusBar } from 'react-native'
import React, { Component, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { IconFill, IconOutline } from "@ant-design/icons-react-native";
import { pTx } from "../../utils/dimensions"
import { bigNumberFormatUnits, getBalance } from 'react-native-web3-wallet';
import { toStringMatch } from '../../utils/format';
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"

const mapStateToProps = state => state.wallet


const WalletModule = ({ NetworkList, navigation }) => {
    const realm = useRealm();
    const wallet = useQuery(schemaName.Wallet, wallet => {
        return wallet.filtered('current = true');
    })[0];
    useEffect(() => {
        const rpcUrl = NetworkList.find(item => item.chainId == wallet.chainId).rpcUrl
        getBalance(rpcUrl, wallet.address).then(res => {
            realm.write(() => {
                wallet.balance = res.toString()
            });
        })
    }, [wallet.address, wallet.chainId]);
    useEffect(() => {
        navigation.setOptions({
            header: () => (
                <View style={[styles.flexDirectionRow, styles.walletHeaderView]}>
                    <View style={[styles.flexDirectionRow]}>
                        <TouchableWithoutFeedback onPress={() => navigation.navigate('walletNetworkList')}>
                            <View style={[styles.flexDirectionRow, { height: pTx(60), width: pTx(30) }]}>
                                <Image style={[styles.icon]} source={require('../../assets/image/icon1.png')}></Image>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={() => navigation.navigate('customNetwork')} >
                            <View style={[styles.flexDirectionRow, { height: pTx(60), width: pTx(30), justifyContent: "center" }]}>
                                <Text style={[styles.node, { backgroundColor: "#16A47B" }]}></Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={styles.flexDirectionRow}>
                        <TouchableWithoutFeedback  >
                            <View style={[styles.flexDirectionRow, { height: pTx(60), width: pTx(35), justifyContent: "flex-end" }]}>
                                <Image style={[styles.icon]} source={require('../../assets/image/icon3.png')}></Image>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback >
                            <View style={[styles.flexDirectionRow, { height: pTx(60), width: pTx(35), justifyContent: "flex-end" }]}>
                                <Image style={styles.icon} source={require('../../assets/image/icon2.png')}></Image>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
            ),
        });
    }, [navigation]);

    return (
        <SafeAreaView style={styles.container}>
            <StatusBar backgroundColor="rgba(237, 237, 237, 1)" barStyle={"dark-content"} />
            <ScrollView style={styles.scrollView}>
                <View style={styles.wallet}>
                    <TouchableWithoutFeedback onPress={() => navigation.navigate('walletDetails')}>
                        <View style={styles.walletBlock}>
                            <View style={styles.flexDirectionRow}>
                                <Text style={styles.walletBlockName}>{wallet.name}</Text>
                                <View style={styles.flexDirectionRow}>
                                    <Text style={styles.walletBlockDates}>详情</Text>
                                    <IconOutline name="right" style={styles.minIcon} />
                                </View>
                            </View>
                            <Text style={styles.price}>$ {toStringMatch(bigNumberFormatUnits(wallet.balance))}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={styles.flexDirectionRow}>
                        <TouchableWithoutFeedback onPress={() => navigation.navigate('transfer')}>
                            <View style={[styles.flexDirectionRow, { flex: 1, justifyContent: "center" }]}>
                                <IconOutline name="swap" />
                                <Text style={styles.FooterText}>转帐</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={() => navigation.navigate('collectionCode')}>
                            <View style={[styles.flexDirectionRow, { flex: 1, justifyContent: "center" }]}>
                                <IconOutline name="download" />
                                <Text style={styles.FooterText}>收款</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
                <View style={styles.assets}>
                    <View style={styles.flexDirectionRow}>
                        <Text style={styles.assetsText}>资产</Text>
                        <IconOutline name="plus-circle" />
                    </View>
                    <View style={styles.assetsRow}>
                        {wallet.symbol ? <View style={[styles.cell, styles.flexDirectionRow]}>
                            <View style={styles.cellIoncName}>
                                <Image style={[styles.assetsIcon]} source={NetworkList.find(item => item.chainId == wallet.chainId).rpcPrefs?.imageSource}></Image>
                                <Text style={styles.assetsName}>{wallet.symbol}</Text>
                            </View>
                            <View style={styles.cellValuePrice}>
                                <Text style={styles.assetsValue}>{toStringMatch(bigNumberFormatUnits(wallet.balance))}</Text>
                                <Text style={styles.assetsPrice}>$0</Text>
                            </View>
                        </View>
                            : ""}
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

export default connect(mapStateToProps, {})(WalletModule)


const styles = StyleSheet.create({
    walletHeaderView: {
        height: pTx(60),
        paddingHorizontal: pTx(15),
        backgroundColor: "rgba(237, 237, 237, 1)"
    },
    flexDirectionRow: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    icon: {
        width: pTx(18),
        height: pTx(18),
    },
    node: {
        width: pTx(8),
        height: pTx(8),
        borderRadius: pTx(18),
        overflow: "hidden"
    },
    container: {
        flex: 1,
        backgroundColor: "#fff",

    },
    scrollView: {
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(15),
    },
    wallet: {
        borderRadius: pTx(6),
        borderWidth: 1,
        borderColor: "rgba(0, 0, 0, 0.06)"
    },
    walletBlock: {
        backgroundColor: "rgba(6, 193, 97, 1)",
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(20),
        borderRadius: pTx(6)
    },
    walletBlockName: {
        color: "#fff",
        fontSize: pTx(15)
    },
    walletBlockDates: {
        color: "#fff",
        fontSize: pTx(12),
    },
    minIcon: {
        marginLeft: pTx(8),
        fontSize: pTx(6),
        color: "#FFF",
        fontSize: pTx(6),
    },
    price: {
        marginTop: pTx(18),
        color: "#FFF",
        fontSize: pTx(15),
    },
    FooterText: {
        marginLeft: pTx(8),
        textAlign: "center",
        paddingVertical: pTx(14),
    },
    assets: {
        marginTop: pTx(20),
    },
    assetsText: {
        fontSize: pTx(16),
        color: "rgba(10, 12, 20, 1)"
    },
    assetsRow: {
        marginTop: pTx(10),
    },
    cell: {
        paddingVertical: pTx(10),
        borderBottomWidth: 1,
        borderColor: "rgba(175, 181, 189, 0.15)"
    },
    cellIoncName: {
        flexDirection: 'row',
        alignItems: "center",
    },
    assetsIcon: {
        width: pTx(32),
        height: pTx(32),
        borderRadius: pTx(32),
    },
    assetsName: {
        marginLeft: pTx(12),
        fontSize: pTx(16),
        color: "#0A0C14"
    },
    assetsValue: {
        fontSize: pTx(16),
        color: "#0A0C14",
        textAlign: "right"
    },
    assetsPrice: {
        marginTop: pTx(5),
        fontSize: pTx(12),
        color: "#AFB5BD",
        textAlign: "right"
    }
})
